<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            display: flex;
            height: 500px;
            margin: auto;
        }

        .content {
            flex: 1;
            background-color: #eee;
            overflow: hidden;
        }

        .content div {
            height: 500px;
        }
    </style>
</head>

<body>

    <div class="container">
        <ul>
            <li>
                <a href="#/first">first</a>
            </li>
            <li>
                <a href="#/second">second</a>
            </li>
            <li>
                <a href="#/third">third</a>
            </li>
        </ul>
        <div class="content">

        </div>
    </div>


    <script>


        // 单页面 ： 一个网页，切换不同的内容(不通过页面跳转)  --- 类似选项卡
        // 实现：借助于锚点 , 根据锚点的值显示对应的内容


        // 模拟使用js动态渲染生成的一段内容
        const template1 = `<div>first</div>`;

        const template2 = `<div>second</div>`;

        const template3 = `<div>third</div>`;


        const oCon = document.querySelector('.content');


        // 默认执行一次
        handle()


        window.onhashchange = handle


        function handle() {
            // alert(1)
            console.log(location.hash);

            let hash = location.hash;


            // 页面刚打开的时候，没有锚点   给他一个默认的锚点值
            if (!hash) {
                hash = '#/first';
            }

            if (hash === '#/first') {
                oCon.innerHTML = template1;
            }
            else if (hash === '#/second') {
                oCon.innerHTML = template2;
            }
            else if (hash === '#/third') {
                oCon.innerHTML = template3;
            }

        }

    </script>



</body>

</html>